<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据看板页面</title>
    <script src="https://mirror.fe80.cn/echarts/5.4.3/echarts.min.js"></script>
    <!-- <script src="https://file.fe80.cn/pages/yuanbaoshuju/22DUN/js/echarts.min.js"></script> -->
    <link rel="stylesheet" href="data-view.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5fd;
        }
        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
        }
        .dashboard-section {
            margin-bottom: 40px;
        }
        h2 {
            margin-bottom: 15px;
        }
        /* 示例样式，具体图表样式需根据实际使用的图表库来定义 */
        .chart-placeholder {
            height: 300px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 18px;
        }
        .sy{ float:left; width: 70%; height:95%; margin-top: 40px;}
    </style>
</head>
<body>

<div class="container">
    <!-- 关键指标概览 -->
    <section class="dashboard-section">
        <h2>关键指标概览</h2>
        <div class="chart-placeholder1">
            <div class="card border rounded-3">
                <div class="card-body">
                  <div class="row">
                    <div class="col-lg-2 col-md-6 border-end text-center">
                      <h3 class="fw-bold">1463</h3>
                      <span>学生总人数</span>
                    </div>
                    <div class="col-lg-2 col-md-6 border-end text-center">
                      <h3 class="fw-bold">27</h3>
                      <span>班级数量</span>
                    </div>
                    <div class="col-lg-2 col-md-6 border-end text-center">
                      <h3 class="fw-bold">1463</h3>
                      <span>学籍总人数</span>
                    </div>
                    <div class="col-lg-2 col-md-6 border-end text-center">
                      <h3 class="fw-bold">2</h3>
                      <span>无学籍人数</span>
                    </div>
                    <div class="col-lg-2 col-md-6 border-end text-center">
                      <h3 class="fw-bold">173</h3>
                      <span>借读总人数</span>
                    </div>
                    <div class="col-lg-2 col-md-6 text-center">
                      <h3 class="fw-bold">103</h3>
                      <span>教师数量</span>
                    </div>
                  </div>
                  
                </div>
              </div>
        </div>
        <!-- <div class="chart-placeholder">用户增长率图表</div> -->
    </section>

    <!-- 用户行为分析 -->
    <section class="dashboard-section">
        <h2>年级班级人数</h2>
        <ul class="tabs">
            <li class="tab active" onclick="openTab('tab1')">七年级</li>
            <li class="tab" onclick="openTab('tab2')">八年级</li>
            <li class="tab" onclick="openTab('tab3')">九年级</li>
        </ul>
        <div style="width: 100%;height: 360px;">
            <div style="width: 60%;float: left;">
                <div id="tab1" class="content show">
                    <div class="allnav" style="height: 300px;" id="echart1"></div>
                </div>
            
                <div id="tab2" class="content">
                    <div class="allnav" style="height: 300px;" id="echart2"></div>
                </div>
            
                <div id="tab3" class="content">
                    <div class="allnav" style="height: 300px;" id="echart3"></div>
                </div>
            </div>
            <div style="width: 36%;float: right;margin: 0;padding-left: 19px;">
                <!-- <div style="width: 36%;float: left;margin-left: 10%;"> -->
                <div class="sy" style="height: 300px;" id="fb3"></div>
            </div>
        </div>
    </section>

    <!-- 销售数据分析 -->
    <section class="dashboard-section">
        <h2>销售数据分析</h2>
        <div id="totalSalesChart" style="width: 100%; height: 300px;"></div>
        <div class="chart-placeholder">销售分布地图</div>
        <div class="chart-placeholder">热销产品排名</div>
    </section>

    <!-- 实时数据更新 -->
    <section class="dashboard-section">
        <h2>实时数据更新</h2>
        <div class="chart-placeholder">动态仪表盘</div>
    </section>
</div>

<!-- 动态数据和交互功能需使用JavaScript配合后端API实现 -->
<script>
var totalSalesChart = echarts.init(document.getElementById('totalSalesChart'));

var option = {
    title: {
        text: '总销售额趋势'
    },
    tooltip: {},
    xAxis: {
        data: ["1月", "2月", "3月", "4月", "5月", "6月"]
    },
    yAxis: {},
    series: [{
        name: '销售额',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230]
    }]
};
totalSalesChart.setOption(option);

function openTab(tabId) {
    var tabs = document.getElementsByClassName("tab");
    var contents = document.getElementsByClassName("content");

    for (var i = 0; i < tabs.length; i++) {
        tabs[i].classList.remove("active");
        contents[i].classList.remove("show");
    }

    document.getElementById(tabId).classList.add("show");
    event.currentTarget.classList.add("active");
    if(tabId == 'tab1'){
        echarts_1();
    }else if (tabId == 'tab2') {
        echarts_2();
    }else if (tabId == 'tab3') {
        echarts_3();
    }
}
echarts_1();
function echarts_1() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart1'));

    option = {
        //  backgroundColor: '#00265f',
          tooltip: {
              trigger: 'axis',
              axisPointer: { type: 'shadow'}
          },
          grid: {
              left: '0%',
              top:'10px',
              right: '0%',
              bottom: '4%',
             containLabel: true
          },
          xAxis: [{
              type: 'category',
                    data: ["1班", "2班", "3班", "4班", "5班", "6班", "7班", "8班", "9班", "10班", "11班"],
              axisLine: {
                  show: true,
               lineStyle: {
                      color: "rgba(48,48,48,.1)",
                      width: 1,
                      type: "solid"
                  },
              },
              
              axisTick: {
                  show: false,
              },
              axisLabel:  {
                      interval: 0,
                     // rotate:50,
                      show: true,
                      splitNumber: 15,
                      textStyle: {
                           color: "rgba(48,48,48,.6)",
                          fontSize: '12',
                      },
                  },
          }],
          yAxis: [{
              type: 'value',
              axisLabel: {
                //  formatter: '{value}',
                  show:true,
                   textStyle: {
                           color: "rgba(48,48,48,.6)",
                          fontSize: '12',
                      },
              },
              axisTick: {
                  show: false,
              },
              axisLine: {
                  show: true,
                  lineStyle: {
                      color: "rgba(48,48,48,.1	)",
                      width: 1,
                      type: "solid"
                  },
              },
              splitLine: {
                  lineStyle: {
                     color: "rgba(48,48,48,.1)",
                  }
              }
          }],
          series: [
              {
             
              type: 'bar',
              data: [51, 49, 43, 47, 51, 50, 50, 55, 56, 57, 56],
              barWidth:'35%', //柱子宽度
              label: {
                  show: true,
                  position: 'top'
              },
              // barGap: 1, //柱子之间间距
              itemStyle: {
                  normal: {
                      color:'#27d08a',
                      opacity: 1,
                      barBorderRadius: 5,
                  }
              }
          }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
}
function echarts_2() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart2'));

    option = {
        //  backgroundColor: '#00265f',
          tooltip: {
              trigger: 'axis',
              axisPointer: { type: 'shadow'}
          },
          grid: {
              left: '0%',
              top:'10px',
              right: '0%',
              bottom: '4%',
             containLabel: true
          },
          xAxis: [{
              type: 'category',
                    data: ["1班", "2班", "3班", "4班", "5班", "6班", "7班", "8班"],
              axisLine: {
                  show: true,
               lineStyle: {
                      color: "rgba(48,48,48,.1)",
                      width: 1,
                      type: "solid"
                  },
              },
              
              axisTick: {
                  show: false,
              },
              axisLabel:  {
                      interval: 0,
                     // rotate:50,
                      show: true,
                      splitNumber: 15,
                      textStyle: {
                           color: "rgba(48,48,48,.6)",
                          fontSize: '12',
                      },
                  },
          }],
          yAxis: [{
              type: 'value',
              axisLabel: {
                //  formatter: '{value}',
                  show:true,
                   textStyle: {
                           color: "rgba(48,48,48,.6)",
                          fontSize: '12',
                      },
              },
              axisTick: {
                  show: false,
              },
              axisLine: {
                  show: true,
                  lineStyle: {
                      color: "rgba(48,48,48,.1	)",
                      width: 1,
                      type: "solid"
                  },
              },
              splitLine: {
                  lineStyle: {
                     color: "rgba(48,48,48,.1)",
                  }
              }
          }],
          series: [
              {
             
              type: 'bar',
              data: [51, 49, 43, 47, 51, 50, 50, 55],
              barWidth:'35%', //柱子宽度
              label: {
                  show: true,
                  position: 'top'
              },
              // barGap: 1, //柱子之间间距
              itemStyle: {
                  normal: {
                      color:'#27d08a',
                      opacity: 1,
                      barBorderRadius: 5,
                  }
              }
          }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
}
function echarts_3() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart3'));

    option = {
        //  backgroundColor: '#00265f',
          tooltip: {
              trigger: 'axis',
              axisPointer: { type: 'shadow'}
          },
          grid: {
              left: '0%',
              top:'10px',
              right: '0%',
              bottom: '4%',
             containLabel: true
          },
          xAxis: [{
              type: 'category',
                    data: ["1班", "2班", "3班", "4班", "5班", "6班", "7班", "8班"],
              axisLine: {
                  show: true,
               lineStyle: {
                      color: "rgba(48,48,48,.1)",
                      width: 1,
                      type: "solid"
                  },
              },
              
              axisTick: {
                  show: false,
              },
              axisLabel:  {
                      interval: 0,
                     // rotate:50,
                      show: true,
                      splitNumber: 15,
                      textStyle: {
                           color: "rgba(48,48,48,.6)",
                          fontSize: '12',
                      },
                  },
          }],
          yAxis: [{
              type: 'value',
              axisLabel: {
                //  formatter: '{value}',
                  show:true,
                   textStyle: {
                           color: "rgba(48,48,48,.6)",
                          fontSize: '12',
                      },
              },
              axisTick: {
                  show: false,
              },
              axisLine: {
                  show: true,
                  lineStyle: {
                      color: "rgba(48,48,48,.1)",
                      width: 1,
                      type: "solid"
                  },
              },
              splitLine: {
                  lineStyle: {
                     color: "rgba(48,48,48,.1)",
                  }
              }
          }],
          series: [
              {
             
              type: 'bar',
              data: [51, 49, 57, 56, 64, 59, 50, 55],
              barWidth:'35%', //柱子宽度
              label: {
                  show: true,
                  position: 'top'
              },
              // barGap: 1, //柱子之间间距
              itemStyle: {
                  normal: {
                      color:'#27d08a',
                      opacity: 1,
                      barBorderRadius: 5,
                  }
              }
          }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
}
function echarts_33() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('fb3'));
option = {
	title: [{
        text: '性别比例',
        left: 'center',
        textStyle: {
            color: '#333',
			fontSize:'16'
        }
    }],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)",
        position:function(p){   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
            top:'10%',
            itemWidth: 10,
                itemHeight: 10,
                data:['男生','女生'],
                        textStyle: {
                    color: 'rgba(48,48,48,.5)',
                    fontSize:'12',
                }
            },
            series: [
                {
                    name:'性别比例',
                    type:'pie',
                    center: ['50%', '50%'],
                    radius: ['40%', '60%'],
                        color: ['#065aab', '#06f0ab'],	
                    label: {show:false},
                    labelLine: {show:true},
                    data:[
                        {value:786, name:'男生'},
                        {value:667, name:'女生'},
                    ]
                }
            ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize({with:'100%',heigth:'100%'});
    });
}
echarts_33();
</script>

</body>
</html>